
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:th="www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>分类管理</title>
<link href="../../../css/main.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" class="tabe_div">
    <p class="p_line text_ient"><a class="find_a">名称：</a><input type="text" v-model="name" class="form_input text_ient" placeholder="输入名称"/>
        <a  class="find_a">类型：</a>
        <select class="form_select" style="padding-left: 1%;" v-model="sel">
            <option value="1" onclick="getfenlei1()">一级分类</option>
            <option value="2" onclick="getfenlei2()">二级分类</option>
            <option value="3" onclick="getfenlei3()">三级分类</option>
        </select>
        <input  type="button" @click="selfenlei()" value="查询" class="but_find"/><p>
    <p class="p_table">
        <a href="#" class="a_add" id="add_box" @click="dialogFormVisible=true">添加</a>
        <a href="#" class="a_add">全部导出</a>
    </p>

    <template>
        <el-table ref="adminTable"
                  :data="fenlei"
                  style="width: 100%;">
            <el-table-column
                    fixed
                    prop="id"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="flid"
                    label="所属分类"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="flname"
                    label="分类名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="display"
                    label="显示状态"
                    width="120">
                <template slot-scope="scope">{{scope.row.display== 1 ? '已显示':'未显示'}}</template>
            </el-table-column>
            <el-table-column
                    prop="des"
                    label="分类描述"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click.prevent="handupdate(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click.prevent="deletefenlei(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </template>
    <div class="col-md-12">
        <div class="text-center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total" @current-change="selfenlei" page-size="10">
            </el-pagination>
        </div>
    </div>
    <el-dialog title="分类信息编辑" :visible.sync="dialogFormVisible">
        <el-form >
            <el-form-item label="分类名称" label-width="150px">
                <el-input v-model="fl.flname" autocomlete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属分类" :label-width="150">
                <el-input v-model="fl.flid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类描述" :label-width="150">
                <el-input v-model="fl.des" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否显示" :label-width="150">
                <select class="form_select" style="padding-left: 1%;" v-model="fl.display">
                    <option value="1" selected="selected">显示</option>
                    <option value="0">不显示</option>
                </select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="inorup">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            dialogFormVisible : false,
            sel : 2,
            name : "",
            fenlei1 : "",
            fenlei2 : "",
            fenlei3 : "",
            fenlei : [],
            total : "",
            fl : {
                id : null ,
                flid  : "",
                flname : "",
                display : 1,
                des : "",
            }
        },
        created(){
            //this.selfenlei();
            this.selfenlei();
        },
        methods:{
            inorup(){
                if(this.fl.id==null){
                    this.insertfenlei();
                }else {
                    this.updatefenlei();
                }
            },
            selfenlei(page){
                if(this.sel == 1){
                    this.getfenlei1(page);
                }
                if(this.sel == 2){
                    this.getfenlei2(page);
                }
                if(this.sel == 3){
                    this.getfenlei3(page);
                }
            },
            getfenlei1(page){
                this.fenlei=[];
                page = page || 1;
                let url = "cs-manage/chaoshi/pmsFenlei1/selectFenlei1?page="+page;
                if(this.name){
                    url +="&aname=" + this.name
                }
                axios.get(url).then(res=>{
                    this.fenlei1=res.data.records;
                    this.total = res.data.total;
                    for(var i in this.fenlei1){
                        this.fenlei.push({
                            id : res.data.records[i].aid,
                            flid : "",
                            flname : res.data.records[i].aname,
                            display : res.data.records[i].display,
                            des : res.data.records[i].des,
                        })
                    }
                    console.log(this.fenlei)
                });
            },
            getfenlei2(page){
                this.fenlei=[];
                page = page || 1;
                let url = "cs-manage/chaoshi/pmsFenlei2/selectFenlei2?page="+page;
                if(this.name){
                    url +="&bname=" + this.name
                }
                axios.get(url).then(res=>{
                    this.fenlei2=res.data.records;
                    this.total = res.data.total;
                    for(var i in this.fenlei2){
                        this.fenlei.push({
                            id : res.data.records[i].bid,
                            flid : res.data.records[i].aid,
                            flname : res.data.records[i].bname,
                            display : res.data.records[i].display,
                            des : res.data.records[i].des,
                        })
                    }
                    console.log(this.fenlei)
                });
            },
            getfenlei3(page){
                this.fenlei=[];
                page = page || 1;
                let url = "cs-manage/chaoshi/pmsFenlei3/selectFenlei3?page="+page;
                if(this.name){
                    url +="&cname=" + this.name
                }
                axios.get(url).then(res=>{
                    this.fenlei3=res.data.records;
                    this.total = res.data.total;
                    for(var i in this.fenlei3){
                        this.fenlei.push({
                            id : res.data.records[i].cid,
                            flid :  res.data.records[i].bid,
                            flname : res.data.records[i].cname,
                            display : res.data.records[i].display,
                            des : res.data.records[i].des,
                        })
                    }
                    console.log(this.fenlei)
                });
            },
            handupdate(row){
                this.fl=row;
                this.dialogFormVisible=true;
            },
            deletefenlei(row){
                let url1 = "cs-manage/chaoshi/pmsFenlei1/deleteFenlei1?aid="+row.id;
                let url2 = "cs-manage/chaoshi/pmsFenlei2/deleteFenlei2?bid="+row.id;
                let url3 = "cs-manage/chaoshi/pmsFenlei3/deleteFenlei3?cid="+row.id;
                let url = "";
                this.$confirm('是否要删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    if(this.sel == 1){
                        url=url1;
                    }
                    if(this.sel == 2){
                        url=url2;
                    }
                    if(this.sel == 3){
                        url=url3;
                    }
                    axios.get(url).then(res=>{
                        console.log(res.data.message)
                        this.$message({
                            message: "删除成功"
                        });
                        this.selfenlei();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
            insertfenlei(){
                let url1 = "cs-manage/chaoshi/pmsFenlei1/insertFenlei1?" +
                    "aname="+this.fl.flname+"&display="
                    +this.fl.display+"&des="+this.fl.des;
                let url2 = "cs-manage/chaoshi/pmsFenlei2/insertFenlei2?" +
                    "bname="+this.fl.flname+"&aid="
                    +this.fl.flid+"&display="+this.fl.display+"&des="+this.fl.des;
                let url3 = "cs-manage/chaoshi/pmsFenlei3/insertFenlei3?" +
                    "cname="+this.fl.flname+"&bid="
                    +this.fl.flid+"&display="+this.fl.display+"&des="+this.fl.des;
                let url = "";
                this.$confirm('是否要添加该条数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    if(this.sel == 1){
                        url=url1;
                    }
                    if(this.sel == 2){
                        url=url2;
                    }
                    if(this.sel == 3){
                        url=url3;
                    }
                    axios.get(url).then(res=>{
                        console.log(res.data.message)
                        this.$message({
                            message: "添加成功"
                        });
                        this.selfenlei();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消添加'
                    });
                })
            },
            updatefenlei(){
                let url1 = "cs-manage/chaoshi/pmsFenlei1/updateFenlei1?" +
                    "aname="+this.fl.flname+"&display="
                    +this.fl.display+"&des="+this.fl.des+"&aid="+this.fl.id;
                let url2 = "cs-manage/chaoshi/pmsFenlei2/updateFenlei2?" +
                    "bname="+this.fl.flname+"&aid="
                    +this.fl.flid+"&display="+this.fl.display+"&des="+this.fl.des+"&bid="+this.fl.id;
                let url3 = "cs-manage/chaoshi/pmsFenlei3/updateFenlei3?" +
                    "cname="+this.fl.flname+"&bid="
                    +this.fl.flid+"&display="+this.fl.display+"&des="+this.fl.des+"&cid="+this.fl.id;
                let url = "";
                this.$confirm('是否要修改?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    if(this.sel == 1){
                        url=url1;
                    }
                    if(this.sel == 2){
                        url=url2;
                    }
                    if(this.sel == 3){
                        url=url3;
                    }
                    axios.get(url).then(res=>{
                        console.log(res.data.message)
                        this.$message({
                            message: "修改成功"
                        });
                         this.selfenlei();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改'
                    });
                })
                this.fl="";
            },

        }

    })
</script>
</body>
</html>
